<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" width="50%" class="pageStyle">
    <div class="printWrap">
      <div class="paperBorder">
        <div id="printArea">
          <el-table
            :data="data"
            :cell-class-name="getCellClass"
            :header-cell-class-name="getHeaderCellClass"
            style="border: 1px solid #000"
          >
            <el-table-column prop="name" header-align="center" align="center" label="物品名称"
            ></el-table-column>
            <el-table-column prop="spec" header-align="center" align="center" label="规格"
            ></el-table-column>
            <el-table-column prop="price" header-align="center" align="center" label="价格"
            ></el-table-column>
            <el-table-column prop="unit" header-align="center" align="center" label="单位"
            ></el-table-column>
            <el-table-column prop="amount" header-align="center" align="center" label="库存数量"
            ></el-table-column>
            <el-table-column prop="updateTime" header-align="center" align="center" label="更新时间"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-button v-print="'#printArea'">打印</el-button>
    <el-button @click="close">关闭</el-button>
  </el-dialog>
</template>
<script>
  export default {
    data () {
      return {
        data: [],
        visible: false
      }
    },
    methods: {
      getCellClass ({row, column, rowIndex, columnIndex}) {
        if (columnIndex !== 0) {
          return 'otherCellClass'
        } else {
          return 'bottomCellClass'
        }
      },
      getHeaderCellClass ({row, column, rowIndex, columnIndex}) {
        if (columnIndex !== 0) {
          return 'otherHeaderCellClass'
        } else {
          return 'bottomHeaderCellClass'
        }
      },
      close () {
        this.visible = false
      },
      init (array) {
        this.data = []
        this.$nextTick(() => {
          this.data = array
          this.visible = true
        })
      }
    }
  }
</script>
<style>
  .pageStyle {
    text-align: center;
  }

  .printWrap {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
  }

  .paperBorder {
    display: flex;
    border: 1px solid #000;
  }

  #printArea {
    display: flex;
    width: 800px;
    /*height: 290mm;*/
    padding: 20px;
  }

  .el-table colgroup {
    width: 100%;
  }

  .otherCellClass {
    border-left: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
  }

  .bottomCellClass {
    border-bottom: 1px solid #000 !important;
  }

  .otherHeaderCellClass {
    color: #000;
    font-size: 1.2em;
    border-left: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
  }

  .bottomHeaderCellClass {
    color: #000;
    font-size: 1.2em;
    border-bottom: 1px solid #000 !important;
  }

</style>

